<template>
	<view class="content">
		<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode" :dotsStyles="dotsStyles">
			<swiper class="swiper-box" @change="change" style="width:100%; height:220px;">
				<swiper-item v-for="(item ,index) in info" :key="index">
					<view class="swiper-item" :class="item.colorClass">
						<image :src="item.url" mode="aspectFill" style="width: 100%;"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="uni-form-item">
			<input class="uni-input" placeholder="请输入搜索设备型号或名称" v-model="search"/>
			<button type="primary" style="margin-left: 15px;" @click="searchDevice()">搜索</button>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in listData" :key="key" @click="getDetail(value)">
				<view class="uni-media-list">
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">{{value.devModel}}</view>
						<view class="uni-media-list-text-bottom">
							<text>{{value.devName}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue"
	var dateUtils = require('../../common/util.js').dateUtils;
	export default {
		components: {
			uniList,
			uniListItem,
			uniLoadMore,
			uniSwiperDot
		},
		data() {
			return {
				listData: [],
				devId: '',
				search: '',
				info: [{
					colorClass: 'uni-bg-red',
					url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
					content: ' A'
				}, {
					colorClass: 'uni-bg-green',
					url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg',
					content: '内容 B'
				}, {
					colorClass: 'uni-bg-blue',
					url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg',
					content: '内容 C'
				}],
				current: 0,
				mode: 'long'
			}
		},
		onLoad() {
			this.getList();
		},
		onPullDownRefresh() {
			this.getList();
		},
		onReachBottom() {
			this.getList();
		},

		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			getList() {
				var data = {
					column: "devId, devModel, devName, devBrand, devType, devPosition"
				};
				uni.request({
					url: 'http://115.159.219.165:8080/devices/listDevices',
					data: data,
					success: function(data) {
						if (data.statusCode == 200) {
							this.listData = data.data.info.list;
							// console.log(data.data.info.list);
							console.log(this.listData);
						}
					}.bind(this),
					fail: function(data, code) {
						console.log('fail' + JSON.stringify(data));
					}
				})
			},
			searchDevice() {
				if (this.search == "") {
					this.getList();
				}else{
					var data = {
						column: "devId, devModel, devName, devBrand, devType, devPosition"
					};
					uni.request({
						url: 'http://115.159.219.165:8080/devices/searchDevice',
						data: {
							key: this.search,
						},
						method: 'POST',
						success: function(data){
							if (data.statusCode == 200) {
								this.listData = data.data.info.list;
								// console.log(data.data.info.list);
								console.log(this.listData);
							}
							console.log(data.data);
						}.bind(this),
						fail: function(data, code) {
							console.log('fail' + JSON.stringify(data));
						},
					});
				}
			},
			getDetail: function(e) {
				let detail = {
					devId: e.devId,
					devModel: e.devModel,
					devName: e.devName,
					devBrand: e.devBrand,
					devType: e.devType,
					devPosition: e.devPosition,
				}
				uni.navigateTo({
					url: "apply?detailDate=" + encodeURIComponent(JSON.stringify(
						detail))
				})
			},
			
		}
	}
</script>

<style>
	view {
		font-size: 28upx;
		line-height: inherit
	}
</style>
